<template>
  <div class="notice-information">
    <el-dialog :title="dialogTitle" v-model="trafficVisible" width="50%">
      <hr style="margin-bottom: 10px" color="#f0f0f0" />
      <div class="dialog-content" style="border: 1px solid #f0f0f0">
        <div class="toolbar">
          <el-input
            v-model="keyword"
            style="width: 240px"
            @input="search()"
            placeholder="请输入事件类型或用户名"
          />
          <el-button type="default" class="refresh-btn" @click="() => { keyword = '' }"
            ><i class="iconfont icon-shuaxin"></i
          ></el-button>
          <el-tooltip content="导出Excel表格" placement="top">
            <el-button type="default" class="excel-btn" @click="exportExcel({data: tableData, name: '路况信息'})"><i class="iconfont icon-Excel"></i
            ></el-button>
          </el-tooltip>
        </div>
        
        <table border="0" cellspacing="0" cellpadding="0" align="center">
          <thead>
            <tr>
              <th>用户名</th>
              <th>事件类型</th>
              <th>事件地址</th>
              <th>坐标</th>
              <th>发生时间</th>
              <th>事件描述</th>
              <th style="width: 120px;">操作</th>
              <th>删除</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
              <td>{{ item.reporter }}</td>
              <td>{{ item.eventType }}</td>
              <td>{{ item.eventLocation }}</td>
              <td>{{ item.location }}</td>
              <td>{{ item.reportTime }}</td>
              <td>{{ item.eventDescription }}</td>
              <td>
                <span v-if="item.status == 1 || item.status == 2">已通过</span>
                <span v-if="item.status == 4">已忽略</span>
                <el-button type="primary" size="small" v-if="item.status == 0" @click="handlePass(item)"
                  >通过
                </el-button>
                <el-button type="warning" size="small" v-if="item.status == 0" @click="handleIgnore(item)">忽略</el-button>
              </td>
              <td><el-button type="danger" size="small"  @click="handleDelete(item)">删除</el-button></td>
            </tr>
          </tbody>
        </table>
        <div v-if="tableData.length === 0">NoData!</div>
      </div>
    </el-dialog>
  </div>

  <el-dialog title="添加事件" v-model="addEventVisible" width="30%" center>
    <el-form label-width="80px">
      <el-form-item label="事件编码">
        <el-input v-model="id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="事件类型">
        <el-input v-model="eventType" autocomplete="off" />
      </el-form-item>
      <el-form-item label="事件等级">
        <el-select v-model="eventLevel" placeholder="请选择">
          <el-option v-for="item in leveltTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发生时间">
        <el-input v-model="reportTime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="发生地点">
        <el-input v-model="eventLocation" autocomplete="off" />
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input v-model="plateNumber" autocomplete="off" />
      </el-form-item>
      <el-form-item label="驾驶员">
        <el-input v-model="driverName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="处理状态">
        <el-select v-model="status" placeholder="请选择">
          <el-option v-for="item in stateTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addEvent()">确定</el-button>
        <el-button type="default" @click="cancelEvent()">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script setup>
import { ref, onMounted, watch, getCurrentInstance } from 'vue'
import { useRoadConditoinStore } from '@/stores/counter.js'
import { storeToRefs } from 'pinia'
import { axios } from '../../main.js'
import { exportExcel } from './hooks/exportExcel.js'
import { Point } from '@/mapgis-api/Point'
let $docLayer = null
let $map = null
let { proxy } = getCurrentInstance()
onMounted(() => {
  $docLayer = proxy.$docLayer
  $map = proxy.$map
})


const { trafficVisible } = storeToRefs(useRoadConditoinStore())
// const dialogVisible = ref(false);

const id = ref('')
const eventType = ref('')
const eventLevel = ref(1)
const reportTime = ref('')
const eventLocation = ref('')
const plateNumber = ref('')
const driverName = ref('')
const status = ref(0)
const location = ref([])

const dialogTitle = ref('路况信息')
const keyword = ref('')
const tableData = ref([])

const eventID = ref('')
const leveltTypes = [
  { label: '一般事故', value: 1 },
  { label: '较大事故', value: 2 },
  { label: '重大事故', value: 3 },
  { label: '严重事故', value: 4 },
]

//处理状态选项
const stateTypes = [
  { label: '未处理', value: 0 },
  { label: '处理中', value: 1 },
  { label: '已归档', value: 2 },
]

const addEventVisible = ref(false)




onMounted(() => {
  watch(trafficVisible, (newVal) => {
    if (newVal) {
      getTableData()
    }
  })
})
const getTableData = () => {
  axios.get('/api/events').then((res) => {
    console.log(res.result)
    tableData.value = res.result
  })
}

const handlePass = (item) => {
  eventType.value = item.eventType
  reportTime.value = item.reportTime
  eventLocation.value = item.eventLocation
  location.value = item.location.split(',')

  addEventVisible.value = true
  eventID.value = item.id

  
}

const handleIgnore = (item) => {
  // console.log(item)
  axios.put('/api/events/' + item.id, { status: 4 }).then((res) => {
    console.log(res)
    // tableData.value = tableData.value.filter((i) => i.id !== item.id)
    getTableData()
  })
  
}

function search() {
  console.log(keyword.value)
  console.log(tableData.value)
  // 过滤出符合搜索条件的用户
  tableData.value = tableData.value.filter((item) => {
    
    return item.reporter.includes(keyword.value) || item.eventType.includes(keyword.value)
  })
}
watch(keyword, () => {
  if (keyword.value === '') {
    getTableData()
  }
})


const addPoints = ({
  inputId,
  typeVal,
  levelVal,
  timeVal,
  inputAddress,
  inputPlate,
  inputDriver,
  stateVal,
}) => {
  //设置属性
  const atrributes = [
    { name: '事件编号', type: 'string', value: inputId },
    { name: '事件类型', type: 'string', value: typeVal },
    { name: '事件等级', type: 'short', value: levelVal },
    { name: '发生时间', type: 'string', value: timeVal },
    { name: '发生地点', type: 'string', value: inputAddress },
    { name: '车牌号', type: 'string', value: inputPlate },
    { name: '驾驶员', type: 'string', value: inputDriver },
    { name: '处理状态', type: 'short', value: stateVal },
  ]
  let locationArray = []

  locationArray.push(location.value[0])
  locationArray.push(location.value[1])
  console.log(locationArray)
  Point.add({
    position: locationArray,
    attr: atrributes,
    service,
    docLayer: $docLayer,
  })
  // $docLayer.refresh()
}
let service = { name: 'xm', layerId: 2 }

const addEvent = () => {
  axios.put('/api/events/' + eventID.value, { status: 1 }).then((res) => {
    console.log(res)
    // tableData.value = tableData.value.filter((i) => i.id !== item.id)
    getTableData()
  })
  addPoints({
    inputId: id.value,
    typeVal: eventType.value,
    levelVal: eventLevel.value,
    timeVal: reportTime.value,
    inputAddress: eventLocation.value,
    inputPlate: plateNumber.value,
    inputDriver: driverName.value,
    stateVal: status.value,
  })
  //清空表单
  id.value = ''
  eventType.value = ''
  eventLevel.value = 1
  reportTime.value = ''
  eventLocation.value = ''
  plateNumber.value = ''
  driverName.value = ''
  status.value = 0

  addEventVisible.value = false
  getTableData()
}

const cancelEvent = () => {
  addEventVisible.value = false
}

const handleDelete = (item) => {
  console.log(item)
  axios.delete('/api/events/' + item.id).then((res) => {
    console.log(res)
    // tableData.value = tableData.value.filter((i) => i.id !== item.id)
    getTableData()
  })
}
</script>

<style scoped>
.toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}
.button-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 10px;
}

tr, td, th {
 padding: 2px;
  border: 1px solid #f0f0f0;
  height: 30px;
}
</style>
